<!--  -->
<template>
  <div >    
          <!-- <div style="padding-left:16px">
            <span class="font17">经验推广填报</span>
          </div>   -->
           <div class="font15 mt10 pl10">
              <span class="titletext ">经验推广</span>
              <div class="graytext  mt10 font13">
                  <span >发起人：</span>
                  <span class="titletext">{{fromdetal.applyUser}}</span>
               </div>
          </div>
          <div class="font11 mt10 bggray ptandpb10">
          <div class=" graytext pl10">
              <span >发起人组织：</span>
              <span class="titletext">{{fromdetal.belongOrgName}}</span>
          </div>
          <div class="mt10 graytext pl10">
            <span >发起人联系方式：</span>
            <span class="titletext">{{fromdetal.applyUserPhone}}</span>
          </div>
          </div>
          <van-form @submit="onSubmit">
          <!-- <van-field 
                autosize
                v-model="fromdetal.applyUser"
                readonly
                label-width="3.5em"
                label="发起人:"
                placeholder="请输入..."
                name="applyUser"
          />
            <van-field 
                v-model="fromdetal.belongOrgName"
                readonly
                label-width="5.5em"
                label="发起人组织:"
                placeholder="请输入..."
                name="belongOrgName"
          />
            <van-field 
                v-model="fromdetal.applyUserPhone"
                readonly
                label-width="7.5em"
                label="发起人联系方式:"
                placeholder="请输入..."
                name="applyUserPhone"
          /> -->
          <van-field 
                rows="1"
                autosize
                type="textarea"
                v-model="fromdetal.problemName"
                required
                label-width="6.5em"
                :right-icon="(isdrawType||canEdit)?'arrow':''" 添加右侧图标
                :readonly="!isdrawType&&!canEdit"
                label="优秀案例名称:"
                placeholder="请填写优秀案例名称"
              
                :rules="[{ required: true, message: '' }]"
                name="problemName"
          />
          <van-field
                required
                readonly
                :right-icon="(isdrawType||canEdit)?'arrow':''" 添加右侧图标
                input-align="left" 设置文字位置
                label-width="8.5em"  设置标题长度
                clickable
                name="questionModeName"  
                :value="fromdetal.questionModeName"
                label="是否推广优秀案例:"
                placeholder="请选择是否推广优秀案例"
                @click="showTypePicker = (isdrawType||canEdit)?true:false"
              
                :rules="[{required: true, message: ''}]"
                />
                <van-popup v-model="showTypePicker" position="bottom">
                    <van-picker
                        show-toolbar
                        :columns="showTypecolumns"
                        @confirm="showTypePickeronConfirm"
                        @cancel="showTypePicker = false"
                    />
                </van-popup> 
            <van-field 
                rows="1"
                autosize
                type="textarea"
                v-model="fromdetal.problemDescribe"
                required
                label-width="6.5em"
                :readonly="(!isdrawType&&!canEdit)"
                label="优秀案例简述:"
                placeholder="请填写问题具体描述"
                maxlength="1000"
                :show-word-limit="(isdrawType||canEdit)"
                :rules="[{ required: true, message: '' }]"
                name="problemDescribe"
          />
        <div class="border-b-1">
                    <van-field label-width="10em" readonly
                    label="优秀案例附件:" class="lyy-width" input-align="left" placeholder="" >
                      </van-field>
                        <template >
                            <template v-if="file_is_show">
                                <div v-for="(item,index) in fromdetal.drawFiles" :key="index" class="fileBox">
                                    <div :readonly="(!isdrawType&&!!canEdit)" class="font14 fileLink" style="color:#0F85CF">
                                      <!-- <a :href='openFileUrlfun(item.anonymousFilePath)'>{{item.fileName}}</a> -->
                                      <a target="_blank" @click="openFileUrlfun(item.anonymousFilePath)">{{item.fileName}}</a>
                                    </div>
                                    <span class="font12 color-red ml5" v-if='(isdrawType||canEdit)' @click="uploadFileDelete(index)">X</span>
                                </div>
                            </template>

                            <form v-if='(isdrawType||canEdit)' action="" class="font14 file" style="height:46px;text-align:right;padding-right:20px">
                                 <van-uploader v-model="fileList" :after-read="fileUpload"  :preview-image='false'>
                                    <van-button icon="plus" type="primary" color="#60a9ec">上传文件</van-button>
                                </van-uploader>
                            </form>
                        </template>
        </div>
         <div v-show="isdrawType||todoType" class="footer">
                <van-button  block type="info" native-type="submit">流转下一步</van-button>
         </div>
        </van-form>
        <div >
        <div v-show="!isdrawType&&!istaizhang" class="spline" ></div>
        <div v-show="!isdrawType&&!istaizhang" style="padding-bottom: 42px">
          <div class="stitle font14">审批意见</div>
          <div v-if="approveList.length > 0" class="swrap" style="width: 100%">
            <div
              class="spiece_flex"
              v-for="(item, index) in approveList"
              :key="index"
            >
              <div class="vertical-a-t display-ib" style="width: 25px">
                <i
                  v-if="index == 0"
                  class="iconfont icon-current font16 color-red2"
                ></i>
                <i
                  v-if="index > 0"
                  class="iconfont icon-yiban font16 color-theme"
                ></i>
                <div v-if="index != (approveList.length-1)" class="optionline"></div>
              </div>
              <div class="vertical-a-t display-ib" style="width: calc(100%)">
                <div style="white-space: nowrap">
                  <span class="color-theme font14"
                    >{{ item.PRODUCERNAME || "暂无" }}：</span
                  >
                  <span class="color-2 font14">{{
                    item.CONTENT || "暂无"
                  }}</span>
                </div>
                <div
                  class="mt05 color-8"
                  style="display: flex; align-items: baseline"
                >
                  <div
                    class="display-ib vertical-a-t font12"
                    style="margin-top: 2px;width: 100%"
                  >
                    {{ item.ORGNAME || "暂无" }}
                  </div>
                  <div
                    class="display-ib vertical-a-t font12 text-r"
                    style="margin-left: 10px; margin-top: 2px;text-align: right;width: 100%"
                  >
                    {{ item.MODIFIEDTIME || "暂无" }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-else>
            <div class="color-9 font12 text-c">暂无数据</div>
          </div>
        </div>
      </div>
 </div>
</template>

<script>
import {getJytgDetail,getZcxjOpinionDetail,uploadProcessFiles }  from "@/api/gettodo"
import {mapGetters} from "vuex"
import { Notify, Toast } from 'vant'
import moment from 'moment'
import {openFileUrl} from '@/store/openFile'
  export default {
    components: {
       
    },
    data(){
            return{
                isdrawType:true,
                fromdetal:{},
                params:this.$route.query,
                showTypePicker:false,
                showTypecolumns:['是','否'],
                approveList:[],
                todoType:false,
                canEdit:false,
                istaizhang:false,
                file_is_show:true,
                fileList:[],
            }
    },
    computed:{
        ...mapGetters(['user']),
        ...mapGetters(['userinfo'])
    },
    //生命周期--创建完成
    created() {
        if(this.params.todoType=='1'){
          this.todoType=true;
        }else{
          this.todoType=false;
        }
         if(this.params.isdraw=='1'){
          this.isdrawType=true;
        }else{
          this.isdrawType=false;
        } 
        //  this.isdrawType=this.params.isdraw;
        //  this.todoType = this.params.todoType;
       
         console.log("是否可编辑"+this.isdrawType);
         if (this.isdrawType&&this.params.istaizhang!='1'){
             this.fromdetal.applyUser=this.userinfo.truename;
             this.fromdetal.belongOrgName=this.userinfo.belongOrgName;
             this.fromdetal.applyUserPhone=this.userinfo.preferredMobile;
             this.fromdetal.applyTime =moment(new Date()).format('YYYY-MM-DD');
             this.fromdetal.questionModeName='是';
             this.fromdetal.questionMode='0';
             this.istaizhang=false;
         }else if (this.isdrawType==false&&this.params.processInstId!=undefined){
              this.getdetail();
              if(this.params.istaizhang=='1'){
                 this.istaizhang=true;
              }else{
                 this.istaizhang=false;
                 if(this.params.location=='djfupt.start'&&this.todoType){
                    this.canEdit=true;
                 }else{
                    this.canEdit = false;
                 }
              }
            
         }
    },
    activated() {
       
    },
    //生命周期--挂载完成
    mounted() {

    },
    //方法调用
    methods: {
      openFileUrlfun(value){
            // return openFileUrl(value);
             this.$router.push(
                {
                 name:'fileview',
                 query:{
                     openFileUrl: openFileUrl(value)
                    }
                }
            );
        },
        getdetail(){
            Toast.loading({
                message:'加载中',
                forbidClick:false
            });
            getJytgDetail(Object.assign(this.params,{userName:this.user.userName}))
                .then((result)=>{
                    this.fromdetal={};
                    Toast.clear();
                    if(!result.data){
                        Notify(result.message);
                        return;
                    }
                    if(result.data.data){
                        this.fromdetal=result.data.data;
                        if(!result.data.data.drawFiles){
                            this.fromdetal.drawFiles=[];
                        }
                        if(this.fromdetal.questionMode == '0'){
                            this.fromdetal.questionModeName='是';
                        }else if(this.fromdetal.questionMode == '1'){
                            this.fromdetal.questionModeName='否';
                        }
                    }

                    this.fromdetal.feedBackApplyUser=this.userinfo.truename;
                    this.fromdetal.feedBackBelongOrgName=this.userinfo.authOrgs[0].displayName;
                    this.fromdetal.feedApplyUserPhone =this.userinfo.preferredMobile;;
                })
                if(!this.istaizhang){
                     getZcxjOpinionDetail(Object.assign(this.params),{userName:this.user.userName})
                      .then((result)=>{
                        Toast.clear();
                        if(!result.data){
                          Notify(result.message);
                          return;
                        }
                        this.approveList=result.data.data.reverse();
                      })
                }
                
        },
        showTypePickeronConfirm(value){
            this.fromdetal.questionModeName=value;
            if(value == '是'){
                this.fromdetal.questionMode='0';
            }else if(value == '否'){
                this.fromdetal.questionMode='1';
            }
            this.showTypePicker=false;
        },
       
        onSubmit(values){
            console.log('values'+JSON.stringify(values))
            console.log('questionMode'+this.fromdetal.questionMode)
            this.fromdetal.type="A"; 
            this.$router.push(
            {
              name:'zcxjtosubmit',
              params:{
                formData:this.fromdetal,
                idcode:this.params
              }
            }
          );
        } ,
        fileUpload(file,detail){
            
            console.log('111'+JSON.stringify(file))
            let dataurl=file.content;
            let arr = dataurl.split(','),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]),
            n = bstr.length,
            u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            var filename=    this.fileList[0].file.name;
            let fileData = new FormData();
            fileData.append('pmInsType', 'A');
            fileData.append('pmInsTypePart', '1');       
            fileData.append('files', new File([u8arr], filename+"", {
                    type: mime
                }));
            this.fileList=[];
            Toast.loading({
                message: '加载中...',
                forbidClick: true,
            });
            uploadProcessFiles(fileData,Object.assign({userName:this.user.userName}))
            .then(res=>{
                Toast.clear();
                if(!res.data){
                    Notify(res.message);
                    return;
                }
                this.file_is_show=false;
                if(this.fromdetal!=null&&this.fromdetal.drawFiles!=null){
                    let listdetails = this.fromdetal.drawFiles;
                    listdetails= listdetails.concat(res.data.data.sysFiles);
                    this.fromdetal.drawFiles=listdetails;
                    console.log(JSON.stringify(this.fromdetal.drawFiles))
                }else{
                    if(this.fromdetal==null){
                        this.fromdetal={};
                    }
                    this.fromdetal.drawFiles=[];
                    this.fromdetal.drawFiles=res.data.data.sysFiles;
                }
                this.file_is_show=true;
            })
            .catch(err=>{
                 Toast.clear();
                Notify('上传失败');
            })
            // drawFiles
        },uploadFileDelete(index){
          this.file_is_show=false;
          this.fromdetal.drawFiles.splice(index);
          this.file_is_show=true;
        }
    }
  }
</script>
<style  scoped>
/* @import url();*/
.consume_title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background: #fff;
}
.consume_title_left {
  flex: 1;
  font-size: 16px;
  font-weight: 400;
}
.mt10{
     margin-top:10px
 }
</style>